@include("layout.header")
<style type="text/css">
    .layui-icon{
        display: none;
    }
</style>
<body>
<div id='content' class="content">
    <div class="tab-title">
            <a class="check linkABlue" id="toAccountLogin" href="javascript:void(0);">手机号登录</a>
            <span class="register-line"></span>
            <a class= "check linkAGray" id="toVCodeLogin" href="javascript:void(0);">验证码登录</a>
        </div>
    <form id="mainForm" class="main-form layui-form" enctype="application/x-www-form-urlencoded">
        
        <div class="tip-box visiblility-hidden">
            <span class="tip-font"></span>
            <span class="close-ico"></span>
        </div>
        <div class='normalInput'>
            <input class="pl_5 inp-focus" type="text" value="" name="phone" id="account" maxlength='50' placeholder='手机号' autocomplete='off' />
        </div>
        <div class="normalInput">
            <input class="pl_5 inp-focus" type="password" name="password" id="password" maxlength="16" value="" autocomplete="off" placeholder="密码">
            <div class="clear"></div>
        </div>
        <input name="remember" id="remember" type="checkbox" value="1"/>
            <label for="remember" tabindex="0">记住登录状态</label>
            <a id="forgetpwd" href="https://i.flyme.cn/forgetpwd" class='linkABlue'>忘记密码?</a>
        <a id="login" class="fullBtnBlue login-btn" lay-submit lay-filter="form-login">登录</a>
        <a id="new_a_mregister" class="btn-go2register" href="https://i.flyme.cn/mregister.html">注册</a>
    </form>

    <form id = "form2" class="main-form layui-form" style="display: none">
        <div class='normalInput'>
            <input class="pl_5 inp-focus" type="text" value="" name="phone" id="the-phone" maxlength='50' placeholder='手机号' autocomplete='off' />
        </div>
        <div id="j_abnormalInp" class="normalInput" >
            <input type="text"  id="abnormal" name="duanxin" class="kapkey inp-focus" maxlength="6" autocomplete='off' placeholder='验证码' />
            <span class="form-line"></span>
            <a id="j_abnormalKey" data-value="5" href="javascript:void(0);" data-type="1" class="linkABlue get_kapkey">获取验证码</a>
            <a id="j_abnormalTime" href="javascript:void(0);" class="kapkey_requested"" style="display: none;"><span class="interval_num">60</span>秒后重新获取</a>
        </div>
        <p id="location" class="abnormal-tips hide">请选择注册地</p>
        <div class="btn-wrap hide"><div class="btn"></div><div class="btn"></div><div class="btn"></div></div>
        <div class="btn-wrap hide" style="margin: 20px 0px;"><div class="btn"></div><div class="btn"></div><div class="btn"></div></div>
        <p id="j_abnormalTips" class="abnormal-tips hide">手机不在身边?</p>

        <div id='kapkeyWrap' class='lineWrap' style='display:none'>
            <div class='normalInput'>
                <input type="text" id="kapkey" class='kapkey inp-focus' placeholder="验证码" maxlength='6' autocomplete='off' />
                <img  class='pointer' title="点击可刷新验证码" />
            </div>
        </div>

        <div class='normalInput fieldInput' style='display:none;'>
            <input id="tips-show"/>
        </div>
        
            <input name="remember"  type="checkbox" value="1"/>
            <label for="remember" tabindex="0">记住登录状态</label>
            <a  href="https://i.flyme.cn/forgetpwd" class='linkABlue'>忘记密码?</a>
        
        <a  class="fullBtnBlue login-btn" lay-submit lay-filter="form2">登录</a>
        <a  class="btn-go2register" href="https://i.flyme.cn/mregister.html">注册</a>
    </form>
</div>
</body>
<script type="text/javascript">
    layui.use(["jquery","layer","form"],function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        $("#toAccountLogin").click(function() {
            $(this).addClass('linkABlue').removeClass('linkAGray');
            $("#mainForm").show();
            $("#toVCodeLogin").addClass('linkAGray').removeClass('linkABlue');
            $("#form2").hide();
        });
        $("#toVCodeLogin").click(function() {
            $(this).addClass('linkABlue').removeClass('linkAGray');
            $("#form2").show();
            $("#toAccountLogin").addClass('linkAGray').removeClass('linkABlue');
            $("#mainForm").hide();
        });

        $("#j_abnormalKey").click(function() {
            that = $(this);
            phone = $("#the-phone").val();
            var checkPhone = /^1[1-9]{1}[0-9]{9}$/;
            if(!checkPhone.test(phone)){
                layer.msg('请填写正确的手机号码', function(){
                        });
            }else{
                $.ajax({
                    type: "POST",
                    url: "/phoneLogin",
                    dataType:"json",
                    data: {phone:phone},
                    success:(function(msg){
                        if(msg.error ==1){
                            layer.msg(msg.info,function(){
                            });
                        }else{
                            $("#j_abnormalTime").show();
                            that.hide();
                            time60 = setInterval(dumiao,1000);
                            function dumiao() {
                                if ($("span.interval_num").text()>0) {
                                    $("span.interval_num").text($("span.interval_num").text()-1);
                                }else{

                                    clearInterval(time60);
                                    $("#j_abnormalTime").hide();
                                    that.show();
                                }
                                
                            }
                            
                        }
                    }),
                    statusCode: {
                        422: function(data) {
                            layer.msg('账号或密码格式错误', function(){
                            });
                        }
                    }
                });
            }
        });

        form.on('submit(form2)', function(data){
            $.ajax({
                type: "POST",
                url: "/phoneCheck",
                dataType:"json",
                data: data.field,
                success:(function(msg){
                    if(msg.error ==1){
                        layer.msg(msg.info,function(){
                            
                        });
                    }else{
                        // alert(msg.id);
                        layer.alert(msg.info,function () {
                            location.href ="/user/"+msg.id;
                        })
                    }
                }),
                statusCode: {
                    422: function(data) {
                        layer.msg('账号或密码格式错误', function(){
                        });
                    }
                }
            });
            return false;
        });



    })

</script>

<script type="text/javascript">
    layui.use(["form","jquery","layer"],function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer
        form.on('submit(form-login)', function(data){
            $.ajax({
                type: "POST",
                url: "/login",
                dataType:"json",
                data: data.field,
                success:(function(msg){
                    if(msg.error ==1){
                        layer.msg(msg.info,function(){
                            location.href ="/reg";
                        });
                    }else{
                        layer.alert(msg.info,function () {
                            location.href ="/user/"+msg.id;
                        })
                    }
                }),
                statusCode: {
                    422: function(data) {
                        layer.msg('账号或密码格式错误', function(){
                        });
                    }
                }
            });
            return false;
        });



    })
</script>


</html>
